<template>
  <page-detail>
    <view class="nanny-detail">
      <!-- 头部信息 -->
      <view class="header">
        <view class="left">
          <img class="avatar" :src="nannyInfo.avatarUrl" mode="aspectFill" />
        </view>
        <view class="right">
          <view class="name-phone">
            <text class="name">{{ nannyInfo.talentName }}</text>
            <text class="phone">{{ nannyInfo.talentPhone }}</text>
          </view>
          <view class="tags" v-if="nannyInfo.tags">
            <van-row>
              <van-col v-for="(tag, index) in nannyInfo.tags.split(',')" :key="index" :span="8">
                <article-tag :text="tag" size="small" tag-style="margin-right: 0px"/>
              </van-col>
            </van-row>
          </view>
          <!-- 基本信息 -->
          <view class="info-grid">
            <view class="info-item">
              <text class="label">年龄</text>
              <text class="value">{{ nannyInfo.talentAge }}岁</text>
            </view>
            <view class="info-item">
              <text class="label">民族</text>
              <text class="value">{{ nannyInfo.talentNation }}</text>
            </view>
<!--            <view class="info-item">-->
<!--              <text class="label">生肖</text>-->
<!--              <text class="value">{{ nannyInfo.zodiac }}</text>-->
<!--            </view>-->
<!--            <view class="info-item">-->
<!--              <text class="label">服务次数</text>-->
<!--              <text class="value">{{ nannyInfo.serviceCount }}</text>-->
<!--            </view>-->
          </view>
        </view>
        <view class="points">{{ nannyInfo.itemScore }}积分</view>
      </view>
      <view class="header-bottom">
        <view class="b-label">
          抢手度
        </view>
        <van-rate v-model="nannyInfo.popularity" v-if="nannyInfo.popularity" allow-half color="#66c2ff" disabled disabled-color="#66c2ff"/>
      </view>
      <!-- 奶奶介绍 -->
      <view class="introduction">
        <text class="title">{{ descText }}介绍</text>
        <view  class="content">
          <text>{{ nannyInfo.talentGoodDirection }}</text>
        </view>
      </view>
    </view>
    <template #footer>
      <van-button type="primary" :text="`${nannyInfo.itemScore}积分预约`" @click="showTime=true" round style="width: 200px"></van-button>
    </template>
<!--    <van-calendar :max-range="2" v-model="showTime" type="range" @confirm="dateConfirm" color="#66c2ff" :default-date="null"/>-->
    <van-popup v-model="showTime" round position="bottom" :style="{ height: '60%' }" get-container="body">
      <ne-pick title="预约" @cancel="showTime=false">
        <div>
          <div style="height:calc((100vh * 0.6) - 44px - 50px);overflow: auto;">
            <van-form ref="form">
              <van-field
                  v-model="appointmentStartTimeName"
                  label="开始时间"
                  placeholder="请选择"
                  readonly
                  clickable
                  @click="showTimeModal('appointmentStartTime')"
                  :rules="[{ required: true, message: '请选择开始时间' }]"
              >
                <template #right-icon>
                  <img src="../../static/image/rl-icon.png" style="width: 16px;height: 16px"/>
                </template>
              </van-field>
              <van-field
                  v-model="appointmentEndTimeName"
                  label="结束时间"
                  placeholder="请选择"
                  readonly
                  clickable
                  @click="showTimeModal('appointmentEndTime')"
                  :rules="[{ required: true, message: '请选择结束时间' }]"
              >
                <template #right-icon>
                  <img src="../../static/image/rl-icon.png" style="width: 16px;height: 16px"/>
                </template>
              </van-field>
            </van-form>
          </div>
          <div class="page-detail_footer box_footer">
            <van-button type="primary" round style="width: 200px;margin: 0 auto;flex: unset" @click="submit">提交</van-button>
          </div>
        </div>
      </ne-pick>
    </van-popup>
    <van-popup v-model="showTimePopup" position="bottom" :close-on-click-overlay="false">
      <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTimePopup=false"
          v-if="timeType==='appointmentStartTime'"
          v-model="appointmentStartTime"
          type="datetime"
          title="开始时间"
          :min-date="minDate"
          :max-date="maxDate"
      />
      <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTimePopup=false"
          v-if="timeType==='appointmentEndTime'"
          v-model="appointmentEndTime"
          type="datetime"
          title="结束时间"
          :min-date="minDate"
          :max-date="maxDate"
      />
    </van-popup>
  </page-detail>
</template>

<script>
import ArticleTag from "../../components/ArticleTag.vue";
import {tbTalentDatabaseList} from "../../api/tbTalentDatabase";
import {Dialog, Toast} from "vant";
import {tbAppointmentSave} from "../../api/tbAppointment";
import {mapGetters} from "vuex";
import {MapUtil} from "../../utils/map";
import NeFileUpload from "../../components/NeFileUpload.vue";
import NePick from "../../components/NePick.vue";
import dayjs from "dayjs";
import {getDict} from "../../api/tbDict";
export default {
  name: 'wx_pages_llhz_sharedDetail',
  components:{NePick, NeFileUpload, ArticleTag},
  data() {
    return {
      showTimePopup:false,
      appointmentStartTimeName:'',
      appointmentEndTimeName:'',
      nannyInfo: {},
      appointmentStartTime:new Date(),
      appointmentEndTime:new Date(),
      itemTimeName:'',
      showTime:false,
      latitude:'',
      longitude:'',
      timeType:'',
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2099, 10, 1),
      descText:''
    }
  },
  computed:{
    ...mapGetters(['userInfo']),
  },
  methods: {
    submit() {
      const _this = this
      const {indexCode} = _this.$route.query
      const {talentName,talentPhone} = _this.nannyInfo
      const {personName,phone} = _this.userInfo
      const formData = {
        appointmentType:'4',
        itemIndexCode:indexCode,
        appointmentPersonName:personName,
        appointmentPhone:phone,
        appointmentUserId:_this.userInfo.userId,
        appointmentStartTime:dayjs(_this.appointmentStartTime).format('YYYY-MM-DD HH:mm:ss'),
        appointmentEndTime:dayjs(_this.appointmentEndTime).format('YYYY-MM-DD HH:mm:ss'),
        appointmentName:talentName,
        latitude:_this.latitude,
        longitude:_this.longitude,
        talentName:talentName,
        talentUserId:talentPhone,
      };
      const startTime = dayjs(formData.appointmentStartTime);
      const endTime = dayjs(formData.appointmentEndTime);
      const duration = endTime.diff(startTime, 'day');
      if (duration > 1) {
        Toast.fail('预约时间不能超过一天');
        return;
      }
      this.$refs.form.validate().then(()=>{
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        }).then(() => {
          _this.$showLoading("提交中...")
          tbAppointmentSave(formData).then(() => {
            _this.$hideLoading()
            _this.search()
            Toast.success('提交成功')
            _this.showTime = false
          }).catch(() => {
            _this.$hideLoading()
          })
        }).catch(() => {});
      })
    },
    async search(){
      const {indexCode} = this.$route.query
      if(indexCode){
        this.loading = true
        let res = await tbTalentDatabaseList({indexCode})
        this.loading = false
        uni.stopPullDownRefresh()
        if(res.data && res.data.length>0){
          this.nannyInfo = res.data.pop()
          getDict("talent_type").then(res=>{
            this.descText = res.data.find(item => item.dictKey === this.nannyInfo.talentType).dictValue
          })
        }else{
          this.nannyInfo = {}
        }
      }
    },
    dateConfirm(value){
      // const [itemStartTime,itemEndTime] = Date
      // this.appointmentStartTime = this.$dayjs(itemStartTime).format('YYYY-MM-DD HH:mm:ss')
      // this.appointmentEndTime = this.$dayjs(itemEndTime).format('YYYY-MM-DD HH:mm:ss')
      // this.itemTimeName = `${this.appointmentStartTime.slice(0,10)} - ${this.appointmentEndTime.slice(0,10)}`
      this.showTimePopup = false
      this[this.timeType] = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      this[`${this.timeType}Name`] = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    showTimeModal(type){
      this.showTimePopup = true
      this.timeType = type
    }
  },
  onLoad() {
    const _this = this
    _this.search()
    MapUtil.Geolocation().then(res => {
      _this.latitude = res.lat
      _this.longitude = res.lng
    })
  }
}
</script>

<style lang="scss" scoped>
.nanny-detail {
  padding: 12px;
  background-color: #ffffff;

  .header {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background-color:$uni-color-success;
    border-radius: 8px 8px 0 0;
    position: relative;
    .points {
      font-size: 14px;
      font-weight: bold;
      padding: 2px 10px;
      border-radius: 0 8px 0 8px;
      position: absolute;
      top: 0;
      right: 0;
      background: #66c2ff;
      color: #F8E4A7;
    }
    .left {
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        margin-right: 16px;
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      .name-phone {
        z-index: 1;
        .name {
          font-size: 18px;
          font-weight: bold;
          color: $uni-color-primary;
          margin-right: 12px;
        }

        .phone {
          font-size: 14px;
          color: #666;
        }
      }

      .tags {
      }
    }
  }
  .header-bottom{
    padding: 12px;
    background-color:#dee9e3;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .b-label{
      color:$uni-color-primary;
      font-weight: bold;
      font-size: 14px;
    }
  }
  .info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    .info-item {
      text-align: left;
      .label {
        font-size: 13px;
        color: #666;
        margin-bottom: 4px;
        display: block;
      }
      .value {
        font-size: 15px;
        color: #333;
        font-weight: bold;
      }
    }
  }

  .popularity {
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 16px;

    .title {
      font-size: 16px;
      color: #333;
      margin-bottom: 12px;
      display: block;
    }

    .stars {
      display: flex;
      align-items: center;

      .star-list {
        display: flex;
        margin-right: 8px;

        .star {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .score {
        font-size: 16px;
        color: #f0a500;
        font-weight: bold;
      }
    }
  }

  .introduction {
    margin-top: 16px;
    border-radius: 8px;
    .title {
      font-size: 16px;
      color: $uni-color-primary;
      margin-bottom: 12px;
      display: block;
      font-weight: bold;
    }

    .content {
      font-size: 14px;
      line-height: 1.6;
      padding: 12px;
      background:$uni-color-success;
    }
  }
}
</style>
